<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        li{
            list-style: none;
        }
        ul{
            padding: 20px 0;
        }
        .list li{
            line-height: 40px;
            border: 1px dashed #333;
        }
        .list li + li{
            /* border-top: 0; */
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <button class="addEle">点击新增</button>
        <ul class="list">
            <li id="first">01</li>
            <li class="second">02</li>
            <li>03</li>
            <li data-msg="four">04</li>
            <li>05</li>
            <li class="last six">06</li>
        </ul>
    </div>
</body>
<script>
    // 事件委托: 利用事件冒泡的元素,把子(代)元素的委托给父元素,由父元素代为执行

    // 事件委托的实现步骤:
    // 1. 给父元素绑定相同类型的事件 (相同类型的事件才能传播)
    // 2. 获取触发事件的元素 => 事件源 (ul及其子(代) 都可以触发事件 => 只想让特定的元素触发(lix6))
    // 3. 判断触发事件的元素 -> 是否是委托事件的元素
    //    a. 如果标签名不同 就按标签名区分
    //    b. 如果元素上有特殊属性(class id 自定义属性),也可以通过属性划分

    // 优点:
    // 1. 把子(代)元素的委托给父元素,由父元素代为执行 => 只需给父元素绑定一个相同类型的事件即可 (节省内存)
    // 2. 可以给未来生成的元素绑定事件 (未来生成的元素: 页面加载时没有 后期又动态生成的元素   => 无论是页面原有的还是未来生成的 都是属于父元素内的, 触发事件都会冒泡到父元素,都会触发父元素的事件)
    // 3. 提升了代码的执行效率


    var addEle = document.querySelector(".addEle");
    var ul = document.querySelector(".list");
    var liList = ul.getElementsByTagName("li");
    console.log(liList);

    // 点击新增 li
    addEle.onclick = function(){
        var li = document.createElement("li");
        li.className = "newLi";
        li.textContent = "我是新增的li";
        li.style.backgroundColor = randColor();

        ul.appendChild(li);
        console.log("新增元素",liList);
    }
    
    // 需求: 给每个li绑定点击事件 => 点击打印当前li和下标
    ul.onclick = function(e){
        var e = e || window.event;
        var target = e.target;
        // console.log("事件被触发了",target,target.tagName);  // ul 或 li

        // 如果标签名不同 就按标签名区分  ul / li
        // "LI".toLowerCase()  => "li"
        // if(target.tagName.toLowerCase() == "li"){
        //     // target => 被点击的li
        //     // this   => 绑定事件的元素 (ul)
        //     var index = Array.from(liList).indexOf(target);
        //     console.log("点击了li",target,index);
        // }

        if(target.tagName.toLowerCase() == "li"){
            if(target.id=="first"){
                console.log("点击了第一个li");
            }else if(target.className == "second"){
                console.log("点击了第二个li");
            }else if(target.dataset.msg == "four"){
                console.log("点击了第四个li");
            }else if(target.classList.contains("six")){
                console.log("点击了第六个li");
            }else if(target.classList.contains("newLi")){  // 点击新增的li
                var index = Array.from(liList).indexOf(target);
                console.log("点击了新增的li",target,index);
            }
        }


    }
    
  




    function randColor() {
        var str = "0123456789abcdef";

        var colorStr = "#";
        for (var i = 0; i < 6; i++) {
            var index = Math.floor(Math.random() * 16); // 0-15的随机数 (下标)
            var char = str.charAt(index);
            colorStr += char;
        }
        return colorStr;
    }

</script>
</html>